#{css}
	/*索引*/
	#left-list .left-list-header{
		display:	inline-block;
		width:		100%;
		cursor:		pointer;
		text-decoration:	none;
	}
	#left-list .left-list-content{
		padding-left:	0;
		padding-right:	0;
		background-color: white;
	}
	#left-list .left-list-content a{
		display:	inline-block;
		width:		100%;
		text-decoration:	none;
		padding-left:	15%;
	}
	#left-list .left-list-content li.active a{
		color:			white;
	}
	#left-list .left-list-content li.active,
	#left-list .left-list-content li.active:hover{
		background-color:	#286090;
		font-weight:		bold;
		text-shadow:		0 -1px 0 #286090;
		background-image: linear-gradient(to bottom,#337ab7 0,#2b669a 100%);
	}
	#left-list .left-list-content li:hover{
		background-color:	#f5f5f5;
	}
	#left-list .left-list-header{
		background-color:	white;
		color:				black;
		border:				1px solid #ddd;
	}
	#left-list .left-list-header-active{
		font-weight:		bold;
		/*background-color:	#286090;*/
		color:				white;
		text-shadow:		0 -1px 0 #286090;
		background-image: linear-gradient(to bottom,#337ab7 0,#2b669a 100%);
	}
#{/css}

<div id="left-list" class="pre-hide">
	#{list items:_arg.groups, as:'index'}
		<a class="left-list-header #{if _arg.group==index.name}left-list-header-active#{/if}" data-seq="${index.seq}">${index.name}</a>
		<ul class="left-list-content">
			#{list items:index.items, as:'item'}
				<li class="#{if _arg.index==item}active#{/if}"><a href="${_arg.resolver.resolve(item)}">${item}</a></li>
			#{/list}
		</ul>
	#{/list}
</div>

#{js}
	$(function(){
		//左侧列表
		$("#left-list").accordion({
			header: ".left-list-header",
			heightStyle: "content",
			event: "hoverintent",
			collapsible: false,
			active: $("#left-list .left-list-header-active").data("seq"),
		}).show()
	})
#{/js}